import React, { Component } from 'react'
import { Redirect, Switch, Route, NavLink } from 'react-router-dom'
export default class Ditais extends Component {
    constructor() {
        super()
        this.state = {
            DataList: [],
            List: [],
            flag: true
        }
    }
    componentWillMount() {

        fetch("https://cnodejs.org/api/v1/topic/" + this.props.location.pathname.split("/")[2]).then(res => res.json())
            .then(data => {
                this.setState({
                    DataList: data.data,
                    List: data.data.replies
                })
                console.log(data)
                fetch("https://cnodejs.org/api/v1/topic_collect/" + localStorage.getItem("Login")).then(res => res.json())
                    .then(data => {
                        console.log(data.data)
                        data.data.forEach(item => {
                            if (item.id === this.props.location.pathname.split("/")[2]) {
                                this.setState({
                                    flag: false
                                })
                            }
                        })
                    })
            })

    }
    coll() {
        this.setState({
            flag: false
        })
        if (localStorage.getItem("token") && localStorage.getItem("Login")) {
            let data = {
                accesstoken: localStorage.getItem("token"),
                topic_id: this.props.location.pathname.split("/")[2]
            }
            fetch('https://cnodejs.org/api/v1/topic_collect/collect', {
                method: "POST",
                headers: {
                    "content-type": "application/json"
                },
                body: JSON.stringify(data)
            })
        } else {
            alert("您还未登录")
            this.props.history.push("/Login")
        }
    }
    uncoll() {
        this.setState({
            flag: true
        })
        if (localStorage.getItem("token") && localStorage.getItem("Login")) {
            let data = {
                accesstoken: localStorage.getItem("token"),
                topic_id: this.props.location.pathname.split("/")[2]
            }
            fetch('https://cnodejs.org/api/v1/topic_collect/de_collect', {
                method: "POST",
                headers: {
                    "content-type": "application/json"
                },
                body: JSON.stringify(data)
            })
        } else {
            alert("您还未登录")
            this.props.history.push("/Login")
        }
    }
    render() {
        return (
            <div>
                <div>
                    {this.state.flag ?
                        <button onClick={this.coll.bind(this)} className="btn-success  btn">收藏</button> :
                        <button onClick={this.uncoll.bind(this)} className="btn-success  btn">取消收藏</button>}
                </div>
                <div dangerouslySetInnerHTML={{ __html: this.state.DataList.content }}></div>
                <h1>评论:</h1>
                <div>{this.state.List.map((item, index) => {
                    return <div key={index} dangerouslySetInnerHTML={{ __html: item.content }}></div>
                })}</div>

            </div>
        )
    }
}
